
<style type="text/css">
.ui.container{width: 1200px;}
.ui.table thead th, .ui.table tr td{
        text-align:center;
    }
</style>
<!--内容区开始-->
<div class="cont">
    <!-- 标签页 -->
    <div class="ui top attached tabular menu">
        <a class="item active" ng-click="first()" data-tab="first">时长统计</a>
        <a class="item" ng-click="seconds()" data-tab="seconds">通话记录</a>
    </div>
    <!-- 时长统计界面 -->
    <div class="ui bottom attached tab segment active" data-tab="first" style=" border: none">
        <div class="menus">
            <div class="menus_top">
                <div class="menus_l"><img alt="查看方式图标" src="dist/images/zt.png"/>查看方式</div>
                <ul id="nav" >
                    <li><a class="btns selected" id="demo1" ng-click="getCallInfo('today')">今日</a></li>
                    <li><a class="btns" id="demo2" ng-click="getCallInfos('week')" >本周</a></li>
                    <li><a class="btns" id="demo3" ng-click="getCallInfos('month')">本月</a></li>
                    <li><a class="btns" id="demo4" ng-click="getCallInfo('all')">全部</a></li>
                </ul>
            </div>
            <div class="menus_con" style="margin-top:-15px;">
                <ul>
                    <li>
                        <label for="textfield" class="li_lable">通话日期</label>
                        <div class="ui left icon input">
                            <input name="begintime" id="begintime" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})" placeholder="开始时间" value="">
                            <i class="calendar icon"></i>
                        </div>
                        <div class="ui left icon input">
                            <input name="endtime" id="endtime" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})" placeholder="结束时间" value="">
                            <i class="calendar icon"></i>
                        </div>
                    </li>
                    <li>
                        <li>
                            <label for="select" class="li_lable">通话类型</label>
                            <select id="c_type" class="select_text">
                                <!-- <option value="">通话类型</option> -->
                                <option value="7" selected = "selected">全部</option>
                                <option value="{{type.k}}" ng-repeat="type in callTypes2">{{type.v}}</option>
                            </select>
                        </li>
                    </li>
                    <a ng-click="search()">搜索</a>
                </ul>
            </div>
            <div  class="menus_con" style="margin-top:45px;">
                <h4>说明：每通电话时长=通话时长/有效通话次数</h4>
            </div>
            <div class="menus_table" id="call_log_lists">
                <table class="ui column table">
                    <thead>
                        <tr>
                            <th>通话次数</th>
                            <th>有效通话次数</th>
                            <th>拨打电话(分钟)</th>
                            <th>累计接听电话(分钟)</th>
                            <th>通话时长(分钟)</th>
                            <th>每通电话时长(分钟)</th>
                        </tr>
                    </thead>
                    <tbody id="show_calllog_info">
                        <tr>
                            <td>{{cal_times}}</td>                       
                            <td>{{eff_cal_times}}</td>
                            <td>{{callinfo_show.dial_cal_time_show}}</td>
                            <td>{{callinfo_show.anser_cal_time_show}}</td>
                            <td>{{callinfo_show.cal_time_show}}</td>
                            <td>{{callinfo_show.per_cal_time_show}}</td>
                        </tr>
                    </tbody>
                    <tbody id="no_calllog_info">
                        <tr ng-show="!busy">
                            <td colspan="6"  style="text-align:center;margin-top:10px" class="null_data">没有找到数据~~~</td>
                        </tr>  
                    </tbody>
                </table>
            </div>
            <div class="menus_con" style="margin-top:175px;" id="wenzi">
                <span>
                    <h4><span ng-show="key =='week' && search_begintime == '' && search_endtime == '' && rcode==1 ">
                        本周每天通话时长统计记录：(单位：日期/分钟)
                        </span>
                        <span ng-show="key =='month' && search_begintime == '' && search_endtime == '' && rcode==1 ">
                            本月每天通话时长统计记录：(单位：日期/分钟)
                        </span>
                        <span ng-show="search_begintime < search_endtime && day <= 20 && rcode==1 ">{{search_begintime}}~{{search_endtime}}每天通话时长统计记录：(单位：日期/分钟)</span>
                        <span ng-show="search_begintime < search_endtime && day > 20 && rcode==1 ">{{search_endtime}}~{{search_begintime}}每天通话时长统计记录：(单位：日期/分钟)</span>
                    </h4>
                </span>
            </div>
            <div class="menus_table" id="change_trend" style="margin-top: 135px;">
                <table class="ui column table">
                    <thead>
                        <tr>
                            <th ng-show="key =='week' && search_begintime == '' && search_endtime == '' " ng-repeat="date in week_shows">                           
                               {{date}}
                            </th>
                            <th ng-show="key =='month' && search_begintime == '' && search_endtime == '' " ng-repeat="date in month_shows">                           
                               {{date}}
                            </th>
                            <th ng-show="search_begintime < search_endtime" ng-repeat="date in time_shows">
                               {{date.vvv}}
                            </th>
                        </tr>
                    </thead>
                    <tbody id="change_trend_show_calllog_info">
                        <tr>
                            <td ng-repeat="calls in call_log_list">
                                <div ng-repeat="call_val in calls">
                                    <span ng-show="call_val.num > 0">{{call_val.v_calltime_sum}}</span>
                                    <span ng-show="call_val.num == 0">0</span>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                    <tbody id="change_trend_no_calllog_info">
                        <tr>
                            <td colspan="7"  style="text-align:center;margin-top:10px" class="null_data">没有找到数据~~~</td>
                        </tr>  
                    </tbody>
                </table>
                <div ng-show="calllogpage2.pageAll > 1 && search_begintime < search_endtime" class="ui borderless pagination menu" jspagination   page-object="calllogpage2" page-func="getChangeTrends" ></div>
            </div>
        </div>
    </div>
    <!-- 通话记录界面 -->
    <div class="ui bottom attached tab segment" data-tab="seconds" style=" border: none">
        <div class="menus" >
            <div class="menus_top">
                <div class="menus_l"><img alt="查看方式图标" src="dist/images/zt.png"/>查看方式</div>
                <ul id="nav" >
                    <li><a ng-click="getCallList('')" class="btns selected" id="demos4">全部</a></li>
                    <li><a ng-click="getCallList('out')" class="btns" id="demos1">打出</a></li>
                    <li><a ng-click="getCallList('in')" class="btns" id="demos2">打入</a></li>
                    <li><a ng-click="getCallList('fal')" class="btns" id="demos3">未接电话</a></li>
                </ul>
            </div>
            <div class="menus_con">
                <ul>
                    <li >
                        <label for="textfield" class="li_lable">拨打客户</label>
                            <input type="text" name="telephone" id="telephone" placeholder="电话号码" value="" ng-keyup="$event.keyCode == 13 && searchs()">
                    </li>
                    <li>
                        <label for="textfield" class="li_lable">通话日期</label>
                        <div class="ui left icon input" style="display:inline-block;">
                            <input name="begintimes" id="begintimes" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})" placeholder="开始时间" value="">
                            <i class="calendar icon"></i>
                        </div>
                        <div class="ui left icon input" style="display:inline-block;margin-left:5px;">
                            <input name="endtimes" id="endtimes" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})" placeholder="结束时间" value="">
                            <i class="calendar icon"></i>
                        </div>
                    </li>
                    <li>
                        <label for="textfield" class="li_lable">通话类型</label>
                        <select name="sel" id="c_types" class="select_text">
                              <option value="7" selected = "selected">全部</option>
                              <option value="{{type.k}}" ng-repeat="type in callTypes">{{type.v}}</option>
                        </select> 
                    </li>
                    <a ng-click="searchs()">搜索</a>
                </ul>
            </div>
            <div class="menus_table" >
                <table class="ui column table">
                    <thead>
                        <tr>
                            <th>通话开始时间</th>
                            <th>分机号</th>
                            <th>通话类型</th>
                            <th>通话号码</th>
                            <th>归属地</th>
                            <th>通话时长(分钟)</th>
                            <th>通道服务器</th>
                        </tr>
                    </thead>
                    <tbody id="show_callog_list">
                        <tr ng-repeat="call in call_logs">
                            <td>{{call.begintime}}</td>
                            <td>{{call.ext_id}}</td>
                            <td>{{call.typename}}</td>
                            <td>{{call.telephone}}</td>
                            <td>{{call.area}}</td>
                            <td>{{call.v_calltime}}</td>
                            <td>{{call.channel}}</td>
                        </tr>
                    </tbody>
                    <tbody id="no_callog_list">
                        <tr ng-show="!busy">
                            <td colspan="7"  style="text-align:center;margin-top:10px" class="null_data">没有找到数据~~~</td>
                        </tr>  
                    </tbody>
                    <tfoot ng-if="calllogpage.pageAll > 1" id="calllogpage_id">
                        <tr>
                            <th colspan="7">
                                <div class="ui pagination menu" jspagination page-object="calllogpage" page-func="getCallList"></div>
                            </th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>
<!-- 系统信息弹出层 -->
<div class="ui systemerror modal transition" >
    <div class="header_h4">
        系统提示
    </div>
    <div class="content">
        <div class="inline fluid fields">
            <div class="field" style="display: inline-block;width: 5%;" ng-show="callRcode==1">
                <i class="thumbs up large icon"></i>
            </div>
            <div class="field" style="display: inline-block;width: 5%;" ng-show="callRcode==0">
                <i class="thumbs down large icon"></i>
            </div>
            <div class="field" style="display: inline-block;">
                <p>{{callMsg}}</p>
            </div>
        </div> 
    </div>
    <div class="actions ">
        <div class="center">
            <div class="ui pop_btn_qd positive">关闭</div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        $('.ui.dropdown').dropdown();
        $(".btns").click(function(){
            $(this).addClass("selected").siblings().removeClass("selected"); 
        });
    });
$('.menu .item').tab();

</script>